<template>
	<div id="">
		<el-dialog title="添加菜单&权限" :visible.sync="dialogVisible" @close='closeDialog'>
		  <el-form :model="form" :rules="rules" ref="form">
		    <el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
		      <el-input placeholder="请输入菜单名称"  size='small' v-model="form.name" autocomplete="off"></el-input>
		    </el-form-item>
			<el-form-item label="类型" :label-width="formLabelWidth">
				<el-radio-group  v-model="form.is_route">
				  <el-radio  label="0">页面</el-radio>
				  <el-radio  label="1">按钮</el-radio>
				  <el-radio  label="2">独立页面</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- 级联菜单 -->
			<el-form-item label="上级菜单" :label-width="formLabelWidth" prop="parent_id">
				  <el-cascader v-model="form.parent_id"
				    placeholder="请选择菜单"
				    :options="options"
				   :props="{ value: 'id', label: 'name',children:'children', checkStrictly: true }"
					@change="handleChange"
				    clearable></el-cascader>
			</el-form-item>
			<!-- 级联菜单 -->
<!-- 		    <el-form-item label="上级菜单" :label-width="formLabelWidth">
		      <el-select v-model="form.parent_id" placeholder="请选择菜单">
		        <el-option label="顶级菜单" value="0"></el-option>
		        <el-option label="菜单一" value="1"></el-option>
		      </el-select>
		    </el-form-item> -->
			<el-form-item label="路径" prop="path" :label-width="formLabelWidth">
			  <el-input placeholder="请路径名称" size='small' v-model="form.path" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item v-if="form.is_route == 0" label="重定向" prop="redirect_name" :label-width="formLabelWidth">
			  <el-input placeholder="请输入重定向名称" size='small' v-model="form.redirect_name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="图标" :label-width="formLabelWidth">
			  <el-input placeholder="请输入图标名称" size='small' v-model="form.icon" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item v-if="form.is_route == 0" label="是否菜单" :label-width="formLabelWidth">
				<el-radio-group  v-model="form.is_menu">
				  <el-radio  label="0">否</el-radio>
				  <el-radio  label="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="是否显示" :label-width="formLabelWidth">
				<el-radio-group  v-model="form.is_show">
				  <el-radio  label="0">否</el-radio>
				  <el-radio  label="1">是</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="排序" :label-width="formLabelWidth">
			  <el-input   size='small' v-model="form.sort" autocomplete="off"></el-input>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="SubmitForm">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
		import AuthApi from '@/api/auth.js'
		export default {
			// props: ['dialogFormVisible'],
		    data() {
		      return {
			
				options: [],				  
				// 规则
				rules: {
				  name: [
					{ required: true, message: '请输入菜单名称', trigger: 'blur' },
					
				  ],
				  parent_id:{ required: true, message: '请选择菜单', trigger: 'blur' },
				  path: [
				  	{ required: true, message: '请输入路径名称', trigger: 'blur' },
				  					
				  ],
				  redirect_name: [
				  	{ required: true, message: '请输入重定向名称', trigger: 'blur' },
				  					
				  ],

				},
				dialogVisible: false,
		        form: {
		          name: '',
				  is_route: '0',
		          parent_id: '',
				  path:'',
		          redirect_name: '',
		          icon: '',
		          is_menu: '0',
				  is_show:'1',
				  sort:'1',
		        },
		        formLabelWidth: '120px'
		      };
		    },

			created() {
			  this.dialogVisible = this.$parent.dialogFormVisible;
			  // 获取菜单
			  // let storeMenus = this.$store.state.user.menus
			  // let data = []
			  // let top = [{'id':'0','name':'顶级菜单','parent_id':'0'}]	
			  // let menus = data.concat(top,storeMenus);
			  // this.options = menus
			  // this.loading = false
			  	
			  // this.options = menus
			  AuthApi.getAuthList().then((res) => {
				this.options = res.data.data
			  }).catch((error) => {
				console.log(error)
			  });	
			},
			methods:{
				handleChange(val){
					console.log(this.form)
				},
				SubmitForm(){
					let params = this.form
				this.$refs.form.validate((valid) => {
					if(valid){
						AuthApi.add(params).then((res) => {
							
						let type = res.data.code == 1?'success':'error';	
						this.$message({
						  message: res.data.msg,
						  type: type
						});
						this.closeDialog();
						this.$router.go(0)
						}).catch((error) => {
							
						
						});	
					}

				})
				},
				closeDialog(){
					// console.log(this.$data.is_Visible)
					this.$emit('handleClick',false)
				}
			}
		  };
</script>

<style scoped>
	/deep/.el-form-item__content {
	    display: block;
	    align-items: center;
	}
	.el-form-item {
	    margin-bottom: 13px;
	}
</style>
